<template>
  <div>
   <Nav></Nav>
    <div class="container-fluid" style="margin-top: 100px">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <!-- <form> -->
          <table
            style="text-align: center"
            class="table table-bordered"
            align="center"
            width="100%"
          >
            <tr class="bg-light text-black-50">
              <th colspan="2" style="text-align: center">
                <h3>管理员登录</h3>
              </th>
            </tr>
            <tr>
              <td><i class="fa fa-user fa-2x"></i></td>
              <td>
                <label for="username"></label
                ><input
                  class="form-control"
                  placeholder="请输入用户名"
                  type="text"
                  id="username"
                  v-model="userData.username"
                />
              </td>
            </tr>
            <tr>
              <td><i class="fa fa-lock fa-2x"></i></td>
              <td>
                <label for=""></label
                ><input
                  class="form-control"
                  placeholder="请输入密码"
                  type="password"
                  v-model="userData.password"
                  id=""
                />
              </td>
            </tr>
            <tr>
              <td><i class="fa fa-image fa-2x"></i></td>
              <td>
                <input
                  class="form-control"
                  placeholder="验证码"
                  type="text"
                  v-model="userData.code"
                  id="safeCode"
                />
              </td>
            </tr>
            <tr>
              <td></td>
              <td>
                <img :src="codeImg" id="codeImg" @click="refresh()" alt="" />
              </td>
            </tr>
            <tr>
              <td>
                <input class="btn btn-outline-info" type="reset" value="重置" />
              </td>
              <td>
                <input
                  class="btn btn-success"
                  style="width: 200px"
                  type="submit"
                  value="登录"
                  @click="Userlogin()"
                />
              </td>
              <td>
                <a href="register">管理员账户注册</a>
                <!-- <router-link to></router-link> -->
              </td>
            </tr>
          </table>
          <!-- </form> -->
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="Login">
import Nav from "../Nav.vue";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/font-awesome.css";
import { ref, reactive, onMounted } from "vue";
import { login } from "../../api/user";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {setToken} from "../../utils/auth"
const router = useRouter();
// import { RouterLink } from 'vue-router';

const userData = reactive({
  username: "",
  password: "",
  code: "",
});
// 获取验证码
const codeImg = ref("");
const getCodeImage = async () => {
  const res = await axios.get("/api/getCode", {
    responseType: "blob",
  });
  codeImg.value = window.URL.createObjectURL(new Blob([res.data]));
};
// 验证码刷新
const refresh = () => {
  window.location.reload();
};
const Userlogin = async () => {
  const res = await login(userData);
  if (res.data.code == 1) {
    setToken(res.data.data.token)
    localStorage.setItem('username',res.data.data.username)
    localStorage.setItem('userId',res.data.data.id)
    ElMessage.success("登录成功");
    // router.push("/dataView");
    window.location.href = "/dataView";
  }
  if (res.data.code == 0) {
    ElMessage.error(res.data.msg);
    window.location.href = "/";
  }
};
// 挂载前
onMounted(() => {
  getCodeImage();
});
</script>

<style scoped></style>
